
html[dir='rtl'] {

  body[data-type^='appearance'] {

    > section#wrapper > main {

      div.boxWrapper {

        > div.box {

          a.revert {
            left: 16px;
            right: unset;
          }

          &.surface {

            > div.checkbox {
              background: linear-gradient(to left, #fec171 0%, #ff6c69 100%);

              &::before {
                -webkit-mask-position-x: 6px;
              }

              &::after {
                right: 3px;
                left: unset;
              }

              &.active {
                background: linear-gradient(to left, #3c5fe1 0%, #3a2b96 100%);

                &::before {
                  -webkit-mask-position-x: 32px;
                }

                &::after {
                  transform: translate3d(-30px, 0, 0);
                }
              }
            }
          }
        }
      }

      div.selectedTheme {

        > span {
          padding-right: 42px;
          padding-left: 14px;
        }

        &::after {
          left: unset;
          right: -5px;
        }

        &::before {
          left: unset;
          transform: scaleX(-1);
        }

        &:hover {

          > span {
            padding-right: 14px;
            margin-right: 40px;
            margin-left: 0;
          }
        }
      }

      a.showThemes {
        padding-right: 22px;
        padding-left: 5px;

        &::before {
          -webkit-mask-position-x: right;
        }
      }

      div.themeList {

        &::before {
          right: unset;
          left: 32px;
          transform: scaleX(-1);
        }

        &::after {
          left: unset;
          right: 35px;
        }
      }

      div.presets {

        > a {
          margin-right: 0;
          margin-left: 7px;
        }
      }

      div[data-name='sidebar'] ul.radioWrapper > li {

        + li {
          margin-right: 30px;
          margin-left: unset;
        }
      }

      div.iconColorWrapper {

        ~ p.note {
          padding-right: 40px;
          padding-left: unset;

          &::before {
            right: 0;
            left: unset;
          }
        }
      }
    }
  }

  iframe[data-appearance] {
    right: unset;
    left: 0;
  }
}